
<template>
  <view class="coupon-page">
    <view class="tab-bar">
      <view 
        v-for="(tab, index) in tabs" 
        :key="index"
        class="tab-item"
        :class="{active: currentTab === index}"
        @click="switchTab(index)"
      >
        {{tab}}
      </view>
    </view>

    <view class="coupon-list">
      <view 
        v-for="(item, index) in filteredCoupons" 
        :key="item.id"
        class="coupon-item"
        :class="item.status"
      >
        <view class="coupon-left">
			<text class="coupon-name">{{item.name}}</text>
			<text class="coupon-time">核销开始时间：{{$u.timeFormat(item.useStartTime, 'yyyy年mm月dd日')}}</text>
			<text class="coupon-status">{{getStatusText(item.status)}}</text>
        </view>
        <view class="coupon-right">
			<u-icon name="coupon" label='核销码' labelPos='bottom' color="#fff" labelColor='#fff' size='60px' @click='showCode(item)'></u-icon>
        </view>
      </view>
    </view>
	<u-modal :show="show" title="核销码" @confirm='show = false' @cancel='show = false'>
		<view style='padding:10px;'>
			<img :src='qrcode' style='width:100%;height:auto' mode='widthFix' />
			<view style='text-align: center;color:#909399;font-size:15px'>请向核销人员出示核销码</view>
		</view>
	</u-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabs: ['未使用', '已使用', '已过期'],
      currentTab: 0,
      coupons: [],
	  show: false,
	  qrcode: '/static/logo.jpg'
    }
  },
  computed: {
    filteredCoupons() {
      const statusMap = ['unused', 'used', 'expired']
      return this.coupons.filter(item => item.status === statusMap[this.currentTab])
    }
  },
  onShow(){
	  this.request.get(`api/user-coupons`,{
		  '@expands': "['entity.coupon']"
	  }).then((res) => {
		  console.log('coupon',res.data)
		  let coupons = []
		  for(let i of res.data){
			  let endTime = new Date(i.expiredTime)
			  let theEndTime = endTime.getTime()
			  endTime = `${endTime.getFullYear()}.${endTime.getMonth() + 1}.${endTime.getDate()}`
			  let status = 'unused'
			  // 先检查是否过期
			  let now = new Date()
			  let nowTime = now.getTime()
			  console.log(nowTime,theEndTime)
			  if(nowTime > theEndTime){
				  status = 'expired'
			  }
			  if(i.isUsed == true){
				  status = 'used'
			  }
			  let coupon = {
				  id: i.id,
				  name: i.coupon.__toString,
				  endTime: endTime,
				  useStartTime: i.coupon.__metadata.useStartTime,
				  status: status
			  }
			  coupons.push(coupon)
		  }
		  this.coupons = coupons
	  })
  },
  methods: {
    switchTab(index) {
      this.currentTab = index
    },
    getStatusText(status) {
      const map = {
        unused: '未使用',
        used: '已使用',
        expired: '已过期'
      }
      return map[status]
    },
	showCode(coupon){
		console.log(coupon)
		this.qrcode = `${getApp().globalData.apiBase}qr-code/mini-program?page=pages/index/coupon-use&scene=${coupon.id}`
		console.log(this.qrcode)
		this.show = true
	}
  }
}
</script>

<style>
.coupon-page {
  padding: 20rpx;
  min-height: 100vh;
  background-color: #262f27;
}
.tab-bar {
  display: flex;
  margin-bottom: 30rpx;
  border-bottom: 1px solid rgba(255,213,145,0.2);
}
.tab-item {
  flex: 1;
  text-align: center;
  padding: 20rpx 0;
  font-size: 28rpx;
  color: rgba(255,213,145,0.5);
}
.tab-item.active {
  color: #ffd591;
  border-bottom: 2px solid #ffd591;
}
.coupon-list {
  padding: 0 10rpx;
}
.coupon-item {
  display: flex;
  margin-bottom: 30rpx;
  border-radius: 12rpx;
  padding: 30rpx;
  background-color: #262f27;
  border: 1px solid #ffd591;
}
.coupon-item.expired {
  border: 1px dashed rgba(255,213,145,0.3);
}
.coupon-left {
  width: 70%;
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  justify-content: center;
  border-right: 1px dashed rgba(255,213,145,0.3);
  padding-right: 20rpx;
}
.coupon-value {
  font-size: 48rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
  color: #ffd591;
}
.coupon-condition {
  font-size: 24rpx;
  color: rgba(255,213,145,0.7);
}
.coupon-right {
  flex: 1;
  padding-left: 30rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.coupon-name {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 15rpx;
  color: #ffd591;
}
.coupon-time {
  font-size: 24rpx;
  margin-bottom: 15rpx;
  color: rgba(255,213,145,0.7);
}
.coupon-status {
  font-size: 24rpx;
  align-self: flex-end;
  color: #ffd591;
}
.coupon-item.expired .coupon-status {
  color: rgba(255,213,145,0.5);
}
</style>
